<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本信息表(所有人员)</title>
    <link rel="stylesheet" href="http://47.100.102.177:8080/app/css/common/bootstrap.min.css">
    <link rel="stylesheet" href="../../../boot/plugin/download/font_2801350_hw9pyy8c125/iconfont.css">    <script src="http://47.100.102.177:8080/app/js/common/jquery-1.12.4.js"></script>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="../../../boot/plugin/element/vue.js"></script>
    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="../../../boot/plugin/element/element.css">
    <!-- 引入element 的组件库-->
    <script src="../../../boot/plugin/element/element.js"></script>
    <style>
        th {
            text-align: center;
        }
    </style>
</head>

<body>
    <div style="width: 100%;height: 20px;"></div>
    <form class="form-inline" style="text-align: center;" id="from_people">
        <div class="form-group">
            <label for="ID">ID</label>
            <input type="text" class="form-control" name="peopleId" id="ID" placeholder="请输入人员ID">
            <label for="phone">电话(账号)</label>
            <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入电话(账号)">
        </div>
        <button type="button" class="btn btn-default" onclick="search()"><i class="iconfont"
                style="font-size: 14px;color: #3E8EF7;">&#xe660;</i></button>
        <button type="button" class="btn btn-info" onclick="flash()">刷新</button>
    </form>
    <div style="width: 100%;height: 20px;"></div>
    <table class="table table-bordered" style="text-align: center;">
        <thead id="th">
            <tr>
                <th><input type="checkbox" id="all"></th>
                <th>人员id</th>
                <th>头像</th>
                <th>身份证号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>生日</th>
                <th>电话</th>
                <th>注册时间</th>
                <th>邮箱</th>
                <th>QQ</th>
                <th>微信</th>
                <th>vip</th>
                <th>是否为管理员</th>
            </tr>
        </thead>
        <tbody id="tb">

        </tbody>


    </table>
    <div style="float: right;margin-right: 20px;">
        <div style="float: left;height: 80px;line-height: 80px;margin-right: 20px;" id="pageNum">共&nbsp;<span style="color: red">${havePeople}</span>&nbsp;条记录&nbsp;&nbsp;</div>
        <div style="float: left;height: 80px;line-height: 80px;margin-right: 20px;">&nbsp;<span style="color: red">8</span>&nbsp;条&nbsp;/&nbsp;页</div>
        <div id="app" style="float: left;" onclick="page()">
            <el-pagination background layout="prev, pager, next" :total="${allPeople}*10" style="margin-top: 23px;">
            </el-pagination>
        </div>
    </div>
    <script>
        new Vue().$mount('#app');

        let people_list = ${people};
        let vip_list = ${vip};

        function flash(){
            location.reload();
        }

        let tb = document.getElementById("tb");
        let str = "";
        for (let i = 0; i < people_list.length; i++) {
            str += '<tr>';
            str += '<td><input type="checkbox"></td>';
            str += '<td>' + people_list[i].peopleId + '</td>';
            str += '<td><img src="/boot/imgs/' + people_list[i].headUrl + '" style="height: 50px;width: 50px;"></td>';
            str += '<td>' + people_list[i].idNum + '</td>';
            str += '<td>' + people_list[i].name + '</td>';
            str += '<td>' + people_list[i].sex + '</td>';
            if (people_list[i].age==0){
                str += '<td></td>';
            }else {
                str += '<td>' + people_list[i].age + '</td>';
            }
            if (people_list[i].birthday!=null){
                str += '<td>' + people_list[i].birthday + '</td>';
            }else {
                str += '<td></td>';
            }
            str += '<td>' + people_list[i].phone + '</td>';
            str += '<td>' +people_list[i].registrationTime+'</td>';
            str += '<td>' + people_list[i].email + '</td>';
            str += '<td>' + people_list[i].qq + '</td>';
            str += '<td>' + people_list[i].wx + '</td>';
            if (vip_list[i]==null){
                str += '<td>非会员</td>';
            }else {
                str += '<td>'+vip_list[i].vipName+'</td>';
            }

            if (people_list[i].ifAdmin==true){
                str += '<td>是</td>';
            }else {
                str += '<td>否</td>';
            }

            str += '</tr>';
        }
        tb.innerHTML = str;

        let allPeople = ${allPeople};
        let havePeople = ${havePeople};
        function page() {
            let active = document.getElementsByClassName("active")[0];

            let param = "nowPage="+parseInt(active.innerText);
            $.get('/boot/admin/getNowPeople',param,function (res){
                str = "";
                let allList = res.data;

                people_list = $.parseJSON(allList[0]);
                vip_list = $.parseJSON(allList[1]);
                for (let i = 0; i < people_list.length; i++) {
                    str += '<tr>';
                    str += '<td><input type="checkbox"></td>';
                    str += '<td>' + people_list[i].peopleId + '</td>';
                    str += '<td><img src="/boot/imgs/' + people_list[i].headUrl + '" style="height: 50px;width: 50px;"></td>';
                    str += '<td>' + people_list[i].idNum + '</td>';
                    str += '<td>' + people_list[i].name + '</td>';
                    str += '<td>' + people_list[i].sex + '</td>';
                    if (people_list[i].age==0){
                        str += '<td></td>';
                    }else {
                        str += '<td>' + people_list[i].age + '</td>';
                    }

                    if (people_list[i].birthday!=null){
                        str += '<td>' + people_list[i].birthday + '</td>';
                    }else {
                        str += '<td></td>';
                    }
                    str += '<td>' + people_list[i].phone + '</td>';
                    str += '<td>' +people_list[i].registrationTime+'</td>';
                    str += '<td>' + people_list[i].email + '</td>';
                    str += '<td>' + people_list[i].qq + '</td>';
                    str += '<td>' + people_list[i].wx + '</td>';
                    if (vip_list[i]==null){
                        str += '<td>非会员</td>';
                    }else {
                        str += '<td>'+vip_list[i].vipName+'</td>';
                    }

                    if (people_list[i].ifAdmin==true){
                        str += '<td>是</td>';
                    }else {
                        str += '<td>否</td>';
                    }
                    str += '</tr>';
                }
                tb.innerHTML = str;
            })
        }



        function search(){
            let from = $("#from_people");
            let param = from.serialize();
            str = "";
            $.post('/boot/admin/findPeople',param,function (res){
                str = "";
                let allList = res.data;

                if (res.code=='200'){
                    people_list = $.parseJSON(allList[0]);
                    vip_list = $.parseJSON(allList[1]);
                    for (let i = 0; i < people_list.length; i++) {
                        str += '<tr>';
                        str += '<td><input type="checkbox"></td>';
                        str += '<td>' + people_list[i].peopleId + '</td>';
                        str += '<td><img src="/boot/imgs/' + people_list[i].headUrl + '" style="height: 50px;width: 50px;"></td>';
                        str += '<td>' + people_list[i].idNum + '</td>';
                        str += '<td>' + people_list[i].name + '</td>';
                        str += '<td>' + people_list[i].sex + '</td>';
                        if (people_list[i].age==0){
                            str += '<td></td>';
                        }else {
                            str += '<td>' + people_list[i].age + '</td>';
                        }

                        if (people_list[i].birthday!=null){
                            str += '<td>' + people_list[i].birthday + '</td>';
                        }else {
                            str += '<td></td>';
                        }
                        str += '<td>' + people_list[i].phone + '</td>';
                        str += '<td>' +people_list[i].registrationTime+'</td>';
                        str += '<td>' + people_list[i].email + '</td>';
                        str += '<td>' + people_list[i].qq + '</td>';
                        str += '<td>' + people_list[i].wx + '</td>';
                        if (vip_list[i]==null){
                            str += '<td>非会员</td>';
                        }else {
                            str += '<td>'+vip_list[i].vipName+'</td>';
                        }

                        if (people_list[i].ifAdmin==true){
                            str += '<td>是</td>';
                        }else {
                            str += '<td>否</td>';
                        }
                        str += '</tr>';
                    }
                }else {
                    str += '<tr><td colspan="15">查询无结果</td></tr>';
                }

                tb.innerHTML = str;
            })
        }

        $(function() {
            //通过点击最上面的全选框，它的选中状态决定后面复选框的选中状态
            $("#all").click(function() {
                $("#tb input").prop("checked", $(this).prop("checked"));
            });

            //后面的复选框点击后，判断是否全部都选中，如果都选中，最上面的全选框自动勾上
            $("#tb input").click(function() {
                if ($("#tb input:checked").length == $("#tb input").length) {
                    $("#all").prop("checked", true);
                } else {
                    $("#all").prop("checked", false);
                }
            });

            $("#ID").bind("input propertychange", function() {
                var text = $("#ID").val();
                if (text != '') { //若输入框1的内容不为空，则输入框2不可用
                    $("#phone").attr("disabled", "disabled");
                } else {
                    $("#phone").removeAttr("disabled");
                }
            })
            $("#phone").bind("input propertychange", function() {
                var text = $("#phone").val();
                if (text != '') { //若输入框1的内容不为空，则输入框2不可用
                    $("#ID").attr("disabled", "disabled");
                } else {
                    $("#ID").removeAttr("disabled"); //移除不可用的属性
                }
            })
        });
    </script>
</body>

</html>